<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="format-detection" content="telephone=no">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />
    <title>test</title>
    <style>
        #wrapper{
            width:100%;
            /*height:100%;*/
            margin:0 auto;
            overflow:hidden;
        }
        #wrapper input{
            width: 100px;
            height: 50px;
            background: #CC3333;
        }
        #wrapper ul li{
            width:100%;
            height:40px;
            line-height:40px;
            text-align:center;
            background:#09C;
            font-size:22px;
            color:#ffffff;
            margin:10px 0px;
        }
        #wrapper ul li.hong{
            background:#C33;
        }
        .main{
            width:100%;
            height:100%;
            /*background:rgba(0,0,0,0.78);*/
            position:fixed;
            left:0px;
            top:0px;
            display:none;
        }
        #tan{
            width:60%;
            height:400px;
            margin:0 auto;
            overflow:hidden;
            position:absolute;
            left:50%;
            top:50%;
            transform:translate(-50%,-50%);
        }
        #tan ul li{
            width:100%;
            height:40px;
            line-height:40px;
            text-align:center;
            background:#09C;
            font-size:22px;
            color:#ffffff;
            margin:10px 0px;
        }
        .bg{
            width:100%;
            height:100%;
            background-color: rgba(0,0,0,0.5);
            position:absolute;
            top:0;
            left:0;
        }
    </style>
</head>
<body>
<div id="wrapper">
    <div>
        遇见，是琥珀流年中如云朵般美丽的诗篇，没有格律，没有韵脚，读之，却朗朗上口，百读不厌。人生中最难忘的，就是一次次镌刻在心灵深处的相遇。静默独处时，伤心落泪时，细细品味，点点滴滴的美好，足可以润泽晦暗枯燥的心灵。
        佛曰：前生五百次的回眸才换得今生的一次擦肩而过。那么，我们的相遇、相知是前生多少次回眸才修得的缘分呢？前生太虚渺，不可知；来生有太渺远，不可测；能把握的，唯有今生。所以，珍惜今生所有的遇见。
        一花一天堂，一草一世界，一树一菩提，一土一如来，一方一净土，一笑一尘缘。想来，所有的遇见，都是前世今生该有的缘分。
        “同是天涯沦落人，相逢何必曾相识”是萍水相逢却又惺惺相惜的缘分， “桃花潭水深千尺，不及汪伦送我情”是高山流水、情同手足的缘分,“曾经沧海难为水，除却巫山不是云”是相识相知、执手红尘的缘分。
        席慕蓉曾说：如何让你遇见我，在我最美丽的时刻，为这，我已在佛前求了五百年，求他让我们结一段尘缘。所以，不管如何，我珍惜所有的遇见。无论我们是素昧平生，还是相识相知。

        <input type="button" value="点我试一下"/>

        我珍惜素昧平生的朋友。虽然我们未曾谋面，可是，一声轻轻的问候，一个甜甜的笑脸，几行温馨的留言，瞬间便拂去萦绕心头的缕缕疲惫和丝丝尘埃。不为别的，只为那一份远隔千里的信任，只为那不为繁琐忙碌阻隔的真诚。虽不相见，我亦懂得，你同我一样，于茫茫人海中穿梭忙碌，于深杳红尘中为了家人奔波付出。我很珍惜，这一份静默在生命一隅的如水清澈的缘。
        我珍惜生活中风雨同舟的朋友。千金易得，知己难求。朋友的真情，是人生千金难买的珍宝。也许，他（她）不会锦上添花，但是他（她）会雪中送炭。他（她）不会甜言蜜语，但是他（她）会推心置腹。伤心时，一句温馨的问候；孤独时，一次真心的陪伴；困难时，一份无私地援助：这些，都是穿透红尘冷漠的暖。所以，我很珍惜，这一份闪烁在我生命中的如阳光温暖的缘。
        我珍惜和我牵手红尘的爱人。不管他前生是不是在三生石畔刻下爱情的誓言，也不管他是不是前生将我掩埋的那个人，我只知道，他是我的亲人。我们除了要平平淡淡的共度光阴，还要共同撑起家庭的未来，无论多少的风风雨雨，我们要一起面对，一起承担。我珍惜，这一份镶嵌在我生命中的如玉温润的缘。
        如果，今生还有一种特殊的遇见：彼此相爱过，却无缘牵手。那么，就把这份爱安放在心灵一隅，于夜深人静时，于静默独处时，在内心深处幽幽绽放吧。纵使不能在一起，相爱过，也是人生旅途最美的一段珍藏。如果，不能继续做朋友，默默地祝福对方也好。如果不能祝福对方，各安天涯一方也好。总之，不要反目为仇，不要辜负了曾经的美好，和今生相遇的缘分。
        不懂得珍惜的人，辜负了红尘中遇见的情谊，就会成为情感上的孤家寡人，就会离快乐越来越远。
        遇见，是一缕清风，舒爽怡人；遇见，是一束阳光，温暖明媚；遇见，是一阕诗词，隽永灵动；遇见，是一曲清音，余音绕梁。今生相遇的人，来生不一定相见。请珍惜，今生所有的遇见！
    </div>
</div>
<div class="main">
    <div id="tan">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
            <li>9</li>
            <li>10</li>
            <li>1</li>
            <li>2</li>
            <li>1</li>
            <li>2</li>
            <li>1</li>
            <li>2</li>
            <li>1</li>
            <li>2</li>
            <li>1</li>
            <li>2</li>
            <li>1</li>
            <li>2</li>
        </ul>
    </div>
</div>
</body>
<script src="js/jquery-2.1.1.min.js"></script>
<script src="js/iscroll.js"></script>
</html>
<script>
    $(function(){
        $("#wrapper").find("input").click(function(){
            $(".main").show();//弹出层显示
            $('.bg').on('touchmove', function (e) { e.preventDefault(); }, false);//弹出层的背景层阻止默认滑动事件
            new IScroll('#tan');//
        });
        $(".main").click(function(){
            $(".main").hide();
        });
    });
</script>